<script setup lang="ts">
import {ref} from "vue";
import {messageType} from "@/types/component/widgets";
import useMessageStore from '@/store/message'
import useTaskStore from '@/store/task'

const props = withDefaults(
    defineProps<{
      message: messageType | null
    }>(),
    {
      message: null
    }
);
const isFocus = ref<boolean>(false)
const cardOpacity = ref<number>(1)
const messageStore = useMessageStore()
const delCard = (key: string) => {
  cardOpacity.value = 0
  setTimeout(() => {
    messageStore.DEL_MESSAGE(key)
    cardOpacity.value = 1
  }, 200)
}
const taskStore = useTaskStore()
const openApp = (key: string, name: string) => {
  if (name !== 'system') {
    messageStore.DEL_MESSAGE(key)
    taskStore.OPEN_APP(name)
  }
}
</script>
<template>
  <div class="message-card" @mouseover="isFocus=true" @mouseleave="isFocus = false" :style="{opacity:cardOpacity}">
    <div class="message-card-container">
      <div class="left-content">
        <div class="app-icon" v-if="message.name==='system'">
          <div class="material-icons">settings</div>
        </div>
        <div class="app-icon" v-else></div>
        <div class="info">
          <div class="title">{{ message.messageTitle }}</div>
          <div class="content">{{ message.messageContent }}</div>
        </div>
      </div>
      <div class="right-content" @click="openApp(message.messageKey,message.name)">
        <span class="material-icons">arrow_forward_ios</span>
      </div>
      <div class="close-btn" v-show="isFocus" @click="delCard(message.messageKey)">
        <div class="material-icons">clear</div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.message-card {
  position: relative;
  box-shadow: -2px -1px 7px rgb(0 0 0 / 40%);
  cursor: pointer;
  transition: 0.2s;
  transition-property: opacity;
  width: 330px;
  margin: 12px auto;
  border-radius: 10px;
  .message-card-container {
    padding: 10px;
    width: 330px;
    height: 90px;
    background-color: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);


    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    .left-content {
      display: flex;
      align-items: center;

      .app-icon {
        display: flex;
        align-items: center;
        user-select: none;

        .material-icons {
          font-size: 45px;
        }
      }

      .info {
        margin-left: 8px;

        .title {
          font-size: 14px;
          font-weight: 600;
        }

        .content {
          width: 220px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .right-content {
      display: flex;
      align-items: center;
      text-align: center;
      color: #798088;
      cursor: pointer;
      user-select: none;
    }

    .right-content:hover {
      color: #959EA8;
    }

    .right-content:active {
      color: #1B1A1F;
    }

    .close-btn {
      position: absolute;
      left: -6px;
      top: -6px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, .9);
      backdrop-filter: blur(8px);
      display: flex;
      justify-content: center;
      align-items: center;

      .material-icons {
        user-select: none;
        font-size: 18px;
        font-weight: 600;
        color: #798088;
      }
    }
  }
}
</style>
